/*
 * @Author: xianfuyou
 * @Date: 2022-04-01 11:08:48
 * @LastEditors: your name
 * @LastEditTime: 2022-04-07 11:39:26
 * @Description: file content
 */
import React, { useState } from 'react'
import ButtonWarpCpn from '../CommBtn/CommBtn'
import { Modal, Row, Col, List, Image, Button, Tag, Table, Tooltip, Form, Upload, Input } from 'antd'
import { DeleteFilled, FolderFilled, PlusCircleFilled, CloseCircleFilled, UploadOutlined, remarkOnChange } from '@ant-design/icons'

import './css/Model.css'

const { TextArea } = Input

// 填充表单数据
const accessoryArr = [];
for (let i = 0; i < 3; i++) {
  accessoryArr.push({
    key: i,
    id: i,
    goodsName: `王者`,
    size: ``,
    type: ``,
    cost: `50`,
    salePrice: '100',
    count: `200`,
    discount: '13135',
    priceAll: `1231`,
    remark: `212312312sadasd`,
    enterTime: `2022-03-30`,
  });
}

export default function OrderProductModel(props) {
  const { isShow, pHandleOk, pHandleCancel } = props
  // 删除弹窗
  const [delProduct, setDelProduct] = useState(false)
  // 保存当前删除商品的Id
  const [nowGood, setNowGood] = useState({})
  const handleOk = () => {
    // 根据当前状态传递不同的数据
    pHandleOk(false);
  };

  const handleCancel = () => {
    pHandleCancel(false);
  };

  // 删除订单商品
  const delHandleOk = () => {
    console.log(nowGood)
    setDelProduct(false)
  }
  // 获取删除当前商品
  const delNowProduct = (record) => {
    // console.log(record)
    setNowGood(record)
    setDelProduct(true)
  }

  // 跟单表单配置
  const checkGoodsTable = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 50,
      render: (id) => {
        return <span style={{ color: '#f20000' }}>{id}</span>
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 120,
    },
    {
      title: '规格',
      dataIndex: 'size',
      key: 'size',
      width: 80,
    },
    {
      title: '型号',
      dataIndex: 'type',
      key: 'type',
      width: 80,
    },
    {
      title: '成本',
      dataIndex: 'cost',
      key: 'cost',
      width: 100,
    },
    {
      title: '售价',
      dataIndex: 'salePrice',
      key: 'salePrice',
      width: 100,
      render: (salePrice) => {
        return <Input value={salePrice}></Input>
      }
    },
    {
      title: '数量',
      dataIndex: 'count',
      key: 'count',
      width: 100,
      render: (count) => {
        return <Input value={count}></Input>
      }
    },
    {
      title: '折扣',
      dataIndex: 'discount',
      key: 'discount',
      width: 100,
      render: (discount) => {
        return <Input value={discount}></Input>
      }
    },
    {
      title: '总金额',
      dataIndex: 'priceAll',
      key: 'priceAll',
      width: 100,
      render: (priceAll) => {
        return <Input value={priceAll} disabled></Input>
      }
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
      render: (remark) => {
        return <Input value={remark}></Input>
      }
    },
    {
      title: '录入时间',
      dataIndex: 'enterTime',
      key: 'enterTime',
      width: 100,
    },
    {
      title: '管理',
      dataIndex: 'manager',
      key: 'manager',
      width: 80,
      render: (manager, record) => {
        return <DeleteFilled onClick={() => { delNowProduct(record) }} style={{ 'color': '#d20000', cursor: 'pointer', fontSize: '16px' }} />
      }
    }
  ]

  return (
    <div>
      {/* 删除商品的弹窗 */}
      {/* 删除弹窗 */}
      <Modal
        className='xfy_dep_add_modal del_modal del_product_modal'
        title="消息"
        okText="确定"
        cancelText="取消"
        visible={delProduct}
        onOk={delHandleOk}
        onCancel={() => { setDelProduct(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <Row align='middle' gutter={10}>
          <Col> <CloseCircleFilled style={{ color: '#faa685', fontSize: '36px' }} /></Col>
          <Col> <span>是否确定删除? 删除后将退回该商品库存！</span></Col>
        </Row>

      </Modal>
      {/* 订单商品 */}
      <Modal
        className='order_product_modal xfy_dep_add_modal'
        title="订单商品明细"
        okText="保存"
        cancelText="关闭"
        visible={isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
        forceRender={true}
        zIndex={1000}
      >
        <Row>
          <Col span={24} style={{ marginBottom: '5px' }}>
            {/* 添加商品接口 */}
            <Row className={'totalCount'} justify="space-between">
              <Col style={{ fontWeight: 'bold' }}>商品明细</Col>
              <Col className={'count'}>
                成本总合：<span>2478元</span> 售价总合：<span>2478元</span> 数量总合：<span>28</span> 折扣总合：<span>0元</span> 最终总金额：<span>8300元</span>
              </Col>
              <Col>
                <ButtonWarpCpn bgcolor="#009966" size="small" icon={<PlusCircleFilled />}>新增商品</ButtonWarpCpn>
              </Col>
            </Row>
          </Col>
          <Col span={24}>
            <Table
              pagination={{
                defaultCurrent: 2,
                pageSize: 5,
                showSizeChanger: true,
                pageSizeOptions: [2, 3, 4, 5]
              }}
              size="small"
              columns={checkGoodsTable}
              dataSource={accessoryArr}
              onRow={(record) => {
                return {
                  onClick: () => { console.log('record123123123=====', record) }
                }
              }}
            />
          </Col>
        </Row>
      </Modal>
    </div>
  )
}
